<template>
  <view class="special-detail">
    <view class="detail-head" @click="toInformation">
      <view class="head-img">
        <image src="@/static/tabbar/score-active.png" mode=""></image>
      </view>
      <view class="head-title">
        <view>叮叮老师看球</view>
        <view>专栏号：121313</view>
      </view>
      <u-icon name="arrow-right" size="28rpx" color="#909090"></u-icon>
    </view>
    <view class="detail-user" v-show="type === '0'">
      <view class="detail-push">
        <view>消息推送</view>
        <u-switch v-model="pushValue" activeColor="#81B6FF" @change="pushChange"></u-switch>
      </view>
      <view class="detail-report" @click="toReport">
        <view>举报专栏</view>
        <u-icon name="arrow-right" size="28rpx" color="#909090"></u-icon>
      </view>
    </view>
    <view class="detail-expert" v-show="type === '1'">
      <view class="detail-row" v-for="item,index in expertList" :key="index" @click="toExpert(item.type)">
        <view>{{item.name}}</view>
        <u-icon name="arrow-right" size="28rpx" color="#909090"></u-icon>
      </view>
    </view>
    <view class="detail-edit">{{type === '1'?'解散专栏' :'退出专栏'}}</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pushValue: true,
        type: '',
        expertList: [{
            name: '专栏成员',
            type: '1'
          },
          {
            name: '买家列表',
            type: '2'
          }, {
            name: '专栏名片',
            type: '3'
          }, {
            name: '收入统计',
            type: '4'
          }
        ]
      }
    },
    onLoad(e) {
      if (e && e.type) {
        this.type = e.type
      }
    },
    methods: {
      pushChange() {
        this.pushValue = this.pushValue ? true : false
      },
      toExpert(type){
        if(type === '1'){
          uni.navigateTo({
            url:'/pages/specialColumnPage/expertPage/expert-member'
          })
        }else if(type === '2'){
          uni.navigateTo({
            url:'/pages/specialColumnPage/expertPage/expert-buyer'
          })
        }else if(type === '4'){
          uni.navigateTo({
            url:'/pages/specialColumnPage/expertPage/income-statistics'
          })
        }
      },
      toReport() {
        uni.navigateTo({
          url: '/pages/specialColumnPage/userPage/special-report'
        })
      },
      toInformation() {
        uni.navigateTo({
          url: '/pages/specialColumnPage/special-information'
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .special-detail {
    box-sizing: border-box;
    padding-top: 30rpx;
  }

  .detail-head {
    box-sizing: border-box;
    padding: 0 40rpx 0 20rpx;
    width: 750rpx;
    height: 178rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    display: flex;
    align-items: center;

    .head-img {
      width: 118rpx;
      height: 118rpx;
      border-radius: 10rpx;

      image {
        width: 118rpx;
        height: 118rpx;
        border-radius: 10rpx;
      }
    }

    .head-title {
      flex: 1;
      margin-left: 20rpx;

      :first-child {
        font-size: 36rpx;
        font-weight: 500;
        color: #313131;
      }

      :last-child {
        margin-top: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;
      }
    }
  }


  .detail-push {
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 0 30rpx 0 40rpx;
    width: 750rpx;
    height: 122rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;

    :first-child {
      font-size: 36rpx;
      font-weight: 500;
      color: #313131;
    }
  }

  .detail-report {
    width: 750rpx;
    height: 122rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 10rpx;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    :first-child {
      font-size: 36rpx;
      font-weight: 500;
      color: #313131;
    }
  }

  .detail-edit {
    width: 750rpx;
    height: 122rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 20rpx;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 122rpx;
    text-align: center;
    color: #FF5353;
  }

  .detail-expert {
    .detail-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 40rpx;
      margin-top: 10rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #313131;
      width: 750rpx;
      height: 122rpx;
      background: rgba(255, 255, 255);
      box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    }
  }
</style>